しずく感なCSS

背景

オッシャレなフロントエンドな方々のポートフォリオサイトを見ていたら作りたくなったので
いろいろな演出を模索していた。

思いついたのは液体のしずくのようなアニメーション…
これをCSSのみで実装したい…

結論

いろいろと悩んだ結果、下記でそれっぽい演出は可能…

main
1
2
3
4
<div class="t1">  
  <div class="t2"></div>  
  <div class="t3"></div>  
 </div>
main
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.t1{/*水滴を表現するためのステージ*/  
    position:absolute;  
    left:100px;  
    margin-top: 100px;  
    filter: blur(30px) contrast(100);/*<- ここが肝です*/  
    margin:auto;  
    width: 200px;  
    height:500px;  
    background-color:#333;  
}  
.t2{/*上に固定される水滴*/  
    position:absolute;  
    margin-top: 50px;  
    margin-left: 50px;  
    width: 100px;  
    height:100px;  
    background-color:#00f;  
}  
.t3{/*垂れる水滴*/  
    position:absolute;  
    width: 60px;  
    height:60px;  
    margin-top: 50px;  
    margin-left: 70px;  
    background-color:#00f;  
    animation: anime 1s linear infinite !important;  
}  
@keyframes anime{/*たれ方のアニメーション*/  
    0%  {margin-top: 100px; }  
  100% {margin-top: 300px; }  
}

See the Pen Waterっぽい by hashito (@hashito) on CodePen.

残った課題

  • 背景色を変えるとfilterがうまくかからず、思った色にできない
  • サイズを小さくしすぎるとfilterで水滴が消失してしまう
    良い解決策があればコメントいただけると助かります…

［追記］テキストでもやってみました。

テキストでも同様のことができることに気づいたので、「I’ll be back」を溶岩に落とすアニメーションをつくってみました。

See the Pen Drop "I'll be back" in the melting furnace by hashito (@hashito) on CodePen.

結構無理矢理感…
フォントサイズがかなりデカくないと駄目なのでfontsizeを200pxにしてtransform:scale(0.2,0.2);にて縮小しています。

あと、'が小さすぎで見えなくなってしまっています。